<template>
    <div class="container">
        <van-search
            background="transparent"
            v-model="searchText"
            :placeholder="searchPlaceholder"
            left-icon=""
            input-align="center"
        />

        <van-tabs v-model:active="active">
            <van-tab :title="$st('wp_Unread')"></van-tab>
            <van-tab :title="$st('wp_Already_read')"></van-tab>
        </van-tabs>
        <wp-null-data-area
            :null-data-msg="$st(nullText[active])"
            v-if="!list_state.message_data || list_state.message_data.length === 0"
            null-text-msg-color="rgba(0,0,0,0.6)"
        />
        <van-list
            v-else
            @load="onLoad"
            v-model:loading="loading"
            :finished="finished"
            :finished-text="$st('wp_No_more')"
            :immediate-check="false"
        >
            <message-card
                class="message-item"
                v-for="(message, index) in list_state.message_data"
                :key="index"
                :message="message"
                @readed="onRead"
                @clickMsg="onClickMessage"
            ></message-card>
        </van-list>
        <div
            class="footer"
            v-if="active === 0 && list_state.message_data.length !== 0"
            :offset-bottom="0"
            position="bottom"
        >

            <van-button
                class="allmessage-button"
                @click="dealAllMessages">{{
                    $st("wp_Mark_all_as_read")
                }}</van-button>

        </div>
    </div>

</template>

<script lang="js">

import _ from 'lodash';
import { reactive, toRefs, onBeforeMount, watch, computed, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
// import moment from 'moment';
import MessageCard from './MessageCard.vue';
import { SystemMessageSetup } from '@/setup/message/SystemMessageSetup.js';
import { getSystemMessage } from '@/api/server.js';
import { apiService } from '@/api/apiService.js';
import { selfI18n } from '@/i18n';
export default {
    name: '',
    components: { MessageCard },
    props: {

    },
    setup (props, context) {
        const router = useRouter();
        const {
            list_state,
            formatMessage,
            setAllMessageRead
        } = SystemMessageSetup();
        const searchPlaceholder = ref('\ue6de ' + selfI18n('wp_Search'));
        const state = reactive({
            nullText: ['wp_No_unread_messages', 'wp_No_messages'],
            searchText: '',
            loading: false,
            finished: false,
            active: 0
        });
        const status = computed(() => {
            return state.active + 1 + '';
        });

        const search = _.debounce(() => {
            apiService({
                api: getSystemMessage,
                param: {
                    n: list_state.page_size,
                    p: list_state.page,
                    params: state.searchText,
                    status: status.value,
                    endtime: '', // moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                    starttime: '', // '1970-01-01 00:00:00',
                    msgtype: ''
                },
                success: (data) => {
                    // alert('success');
                    list_state.message_data.push(...formatMessage(data.value));
                    list_state.total_num = data.number;
                },
                fail () {
                    state.finished = true;
                },
                end () {
                    // alert('end');
                    // console.log(list_state.message_data);
                    state.loading = false;
                    if (list_state.page * list_state.page_size >= list_state.total_num) {
                        state.finished = true;
                    }
                }
            });
        }, 500);
        const onLoad = () => {
            list_state.page++;
            console.log('onLoad');
            search();
        };
        const refresh = () => {
            list_state.page = 1;
            list_state.message_data = [];
            search();
        };
        // 已读处理
        const onRead = (msg) => {
            refresh();
        };
        const onClickMessage = (msg) => {
            refresh();
            if (msg.eventinfo && msg.eventinfo.repairid) {
                router.push({
                    name: 'maitenanceorderdetail',
                    params: { repairId: msg.eventinfo.repairid }
                });
            }
        };

        const dealAllMessages = _.debounce(() => {
            setAllMessageRead();
        }, 500);
        watch(() => state.active, () => {
            state.loading = false;
            state.finished = false;
            list_state.page = 1;
            list_state.message_data = [];
            // console.log(' state.active');
            search();
        });
        watch(() => state.searchText, () => {
            list_state.page = 1;
            list_state.message_data = [];
            search();
        });
        onBeforeMount(() => {
            list_state.page_size = 20;
        });

        onMounted(() => {
            search();
        });

        return {
            searchPlaceholder,
            onRead,
            onLoad,
            onClickMessage,
            list_state,
            dealAllMessages,
            ...toRefs(state)
        };
    }
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
    :deep(.van-search){
    .van-field__control[type=search] {
        font-family: 'iconfont';
    }
}
}

.message-item {
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  height: auto;
}
.allmessage-button {
  margin: 0px;
  background: #ffffff;
  width: calc(100vw - 32px);
  border: 1px solid #dddddd;
  border-radius: 21px;
  font-size: 18px;
  font-weight: Normal;
  text-align: CENTER;
}
.footer {
  position: fixed;
  bottom: 0;
  height: 53px;
  width: 100%;
  background-color: white;
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>
